// 推荐页
<template>
	<div class="recommend" @click='getBanner'>
		<swiper :options="swiperOption">
			<swiper-slide v-for='(item,i) in msgs.data' :key='i'><img :src="item.pic" class="banner-item" alt=""></swiper-slide>
			<div v-if='msgs' class="swiper-pagination" slot="pagination"></div>
		</swiper>
		</swiper>

		<!--美容  预约 -->
		<div class="im_door container">
			<mu-flexbox>
				<mu-flexbox-item class="flex-demo">
					<router-link class="serve first-a" to='/door'>
						<span></span><i>美容师上门</i>
					</router-link>
				</mu-flexbox-item>
				<mu-flexbox-item class="flex-demo">
					<router-link class="serve" to='/store'>
						<span class="last-store"></span><i>预约到店</i>
					</router-link>
				</mu-flexbox-item>
			</mu-flexbox>
		</div>
		<!--美容  预约 -->

		<!--套餐流程-->
		<div class="container im_package clearfix">
			<div class="im_padd fl">
				<a href="">
					<img class="img-responsive center-block" src="../../../static/package011.png" />
				</a>
			</div>
			<div class="right-img">
				<div class="img-top">
					<a href="">
						<img class="img-responsive center-block" src="../../../static/package02.png" />
					</a>
				</div>
				<div class="img-bottom">

					<a href="">
						<img class="img-responsive center-block" src="../../../static/package03.png" />
					</a>
				</div>
			</div>
		</div>
		<!--套餐流程end-->
		
		<!--热门项目 接收一个对象-->
		<hot-project :hotmsgs='hotmsgs'></hot-project>
	 
		
	</div>
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import hotProject  from './hotProject.vue'
	import api from '../../api'
	export default {
		data() {
			return {
				// 轮播图
				swiperOption: {
					pagination: '.swiper-pagination',
					paginationClickable: true,
					autoplay: 3000,
					autoplayDisableOnInteraction: false,
					loop: true
				},
				msgs: {},
				hotmsgs:{},
			}
		},
		created() {
			this.getBanner()
			this.getHotProject()
		},
		methods: {
			// 轮播图请求
			getBanner() {
				var url = api.getBanner()
				this.$http.jsonp(url, null, function(err, data) {
					if(err) {
						console.error(err.message);
					} else {
						this.msgs = data;
					}
				}.bind(this));

			},
			// 热门项目请求
			getHotProject(){
				var url = api.getHotProject();
				this.$http.jsonp(url, null, function(err, data) {
					if(err) {
						console.error(err.message);
					} else {
						this.hotmsgs = data; 
					
					}
				}.bind(this));
				
			}
		},
		components: {
			swiper,
			swiperSlide,
			hotProject
		}

	}
</script>
<style lang="less" ref="stylesheet/less" scoped>
	.recommend {
		width: 100%;
		.banner-item {
			width: 100%;
		}
		.im_door {
			margin-top: 10px;
			background: #fff;
			height: 76px;
			margin-bottom: 10px;
		}
		.mu-flexbox {
			height: 100%;
			.flex-demo {
				height: 100%;
				padding: 10px 0px;
			}
		}
		.first-a {
			border-right: 1px solid #ccc;
		}
		.serve {
			color: #333;
			display: block;
			line-height: 55px;
			height: 55px;
			>i {
				font-style: normal;
				overflow: hidden;
				margin-left: 5px;
			}
			>span {
				padding-top: 10px;
				float: left;
				width: 50px;
				height: 50px;
				background: url('../../../static/door.png') no-repeat;
				background-size: 80%;
				margin-left: 20px;
				background-origin: content-box;
			}
			.last-store {
				background: url('../../../static/store.png') no-repeat;
				background-size: 80%;
			}
		}
		// 套餐流程
		.im_package {
			background: #fff;
			padding-top: 15px;
			margin-bottom: 10px;
			.im_padd {
				padding-left: 0px;
				padding-right: 0px;
				width: 33.33333333333333%;
				border-right:1px solid #CCCCCC;
			}
			.img-responsive {
				display: block;
				height: auto;
				max-width: 100%;
			}
			.right-img {
				overflow: hidden;
				.img-top {
					height: 74px;
					border-bottom: 1px solid #CCCCCC;
				}
				.img-responsive{
					height: 100%;
				}
				.img-bottom {
					height: 74px;
				}
			}
			
		}
	}
</style>